<template>
	<view class="wrapper" :style="{backgroundColor: pageData?.page?.style?.titleBackgroundColor}">
		<diy
			style="position: relative;"
			@chooseGoods="chooseGoods"
			:diyItems="pageData.items">
		</diy>
		<!--商品弹窗-->
		<goods-popup
		@close="closeGoods"
		:showGoods="showGoods"
		:goods="goodsInfo"></goods-popup>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import { shopMobilePage2 } from "@/api/app_api/index"
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const pageCode = ref('')
	
	// 获取首页diy配置
	const pageData = ref({})
	const getShopMobilePage = () => {
		if (!pageCode.value || !userStore?.regionCode) return false
		shopMobilePage2({
			pageCode: pageCode.value,
			regionCode: userStore.regionCode
		}).then(res => {
			if (res?.data?.pageDataJson) {
				pageData.value = res.data.pageDataJson
				uni.setNavigationBarTitle({
					title: pageData.value?.page?.params?.title || '廷与食材'
				})
			}
		})
	}
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		showGoods.value = true
		goodsInfo.value = item
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	watch(() => userStore.regionCode, (newVal, oldVal) => {
		getShopMobilePage()
	})
	
	onLoad((option) => {
		if (option.pageCode) {
			pageCode.value = option.pageCode
			getShopMobilePage()
		}
	})
</script>

<style lang="scss" scoped>
	.wrapper {
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
